<template>
    <div>
        <bread-nav>
            <span slot="nav1">数据统计</span>
            <span slot="nav2">数据报表</span>
        </bread-nav>
       <el-card>
<!--           数据报表视图区域-->
           <div id="main" style="width: 800px;height: 500px">
           </div>
       </el-card>
    </div>
</template>

<script>
    import BreadNav from "../../components/content/BreadNav";
    import {getReport} from "../../network/report";
    import _ from "lodash";
    import echarts from 'echarts'
    export default {
        name: "Report",
        components:{
            BreadNav
        },
        data(){
            return {
                option : {
                    title: {
                        text: '数据报表'
                    },
                    tooltip: {},
                    legend: {
                        data:['销量']
                    },
                    xAxis: {
                        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                },
                reportOption:[]
            }
        },
        methods:{
            getReportM(){
                getReport().then(res => {
                    if(res.data.meta.status !== 200){
                        this.$message.error('获取数据失败！')
                    }
                    this.reportOption = res.data.data;
                    this.setReport()
                })
            },
            //数据报表
            setReport(){
                const myChart = echarts.init(document.getElementById('main'));
                // 使用刚指定的配置项和数据显示图表。
                const result = _.merge(this.option,this.reportOption);
                myChart.setOption(result);
            }
        },
        mounted() {
            this.getReportM();
        }
    }

</script>

<style scoped>

</style>